Programming Windows® 8 Apps with HTML, CSS, and JavaScript by Kraig Brockschmidt

Author:Kraig Brockschmidt
Language: eng
Format: epub, mobi, pdf
Publisher: Microsoft Corporation
Published: 2012-03-14T16:00:00+00:00

Playing Sequential Audio

An app that’s playing audio tracks (such as music, an audio book, or recorded lectures) will often have a list of tracks to play sequentially, especially while the app is running in the background. In this case it’s important to start the next track quickly because Windows will otherwise suspend the app in 10 seconds after the current audio is finished. For this purpose, listen for the audio element’s ended event and set audio.src to the next track. A good optimization in this case is to create a second Audio object and set its src attribute after the first track starts to play. This way that second track will be preloaded and ready to go immediately, thereby avoiding potential delays in playback between tracks. This is shown in the AudioPlayback example for this chapter, where I’ve split the one complete song into four segments for continuous playback. I’ve also shown here how to handle the next and previous button events, along with setting the segment number as the track name:

var mediaControl = Windows.Media.MediaControl var playlist = ["media/segment1.mp3", "media/segment2.mp3", "media/segment3.mp3", "media/segment4.mp3"]; var curSong = 0; var audio1 = null; var preload = null; document.getElementById("btnSegments").addEventListener("click", playSegments); audio1 = document.getElementById("audioSegments"); preload = document.createElement("audio"); function playSegments() { //Always reset WinRT object event listeners to prevent duplication and leaks mediaControl.removeEventListener("nexttrackpressed", nextHandler); mediaControl.removeEventListener("previoustrackpressed", prevHandler); curSong = 0; //Pause the other music document.getElementById("musicPlayback").pause(); //Set up media control listeners setMediaControl(audio1); //Show the element (initially hidden) and start playback audio1.style.display = ""; audio1.volume = 0.5; //50%; playCurrent(); //Preload the next track in readiness for the switch var preload = document.createElement("audio"); preload.setAttribute("preload", "auto"); preload.src = playlist[1]; //Switch to the next track as soon as one had ended or next button is pressed audio1.addEventListener("ended", nextHandler); mediaControl.addEventListener("nexttrackpressed", nextHandler); } function nextHandler () { curSong++; //Enable previous button if we have at least one previous track if (curSong > 0) { mediaControl.addEventListener("previoustrackpressed", prevHandler); } if (curSong < playlist.length) { //playlist[curSong] should already be loaded playCurrent(); //Set up the next preload var nextTrack = curSong + 1; if (nextTrack < playlist.length) { preload.src = playlist[nextTrack]; } else { preload.src = null; mediaControl.removeEventListener("nexttrackpressed", nextHandler); } } } function prevHandler() { //If we're already playing the last song, add the next button handler again if (curSong == playlist.length - 1) { mediaControl.addEventListener("nexttrackpressed", nextHandler); } curSong--; if (curSong == 0) { mediaControl.removeEventListener("previoustrackpressed", prevHandler); } playCurrent(); preload.src = playlist[curSong + 1]; //This should always work } function playCurrent() { audio1.src = playlist[curSong]; audio1.play(); mediaControl.trackName = "Segment " + (curSong + 1); }

When playing sequential tracks like this from an app written in JavaScript and HTML, you might notice brief gaps between the tracks, especially if the first track flows directly into the second. This is a present limitation of the platform given the layers that exist between the HTML audio element and the low-level XAudio2 APIs that are ultimately doing the real work. You can mitigate the effects to some extent—for example, you can crossfade the two tracks or crossfade a third overlay track that contains a little of the first and a little of the second track.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.